<template>
  <div class="watch">

      <input type="text" v-model="keyword" placeholder="输入关键字">
      <ul>
        <li v-for="d in result" :key="d">{{d}}</li>
      </ul>


      <button @click="num++">{{ num }}</button>

      <form>
        <input type="text" placeholder="手机号" v-model="loginForm.username" /><br />
        <input type="text" placeholder="验证码" v-model="loginForm.code"> <br />
        <button>登录</button>
      </form>

  </div>
</template>

<script>
export default {
  data() {
    return {


      keyword: '', // 搜索关键词
      result: [],  // 搜索结果
      num: 100,
      loginForm: {
        username: '',
        code: ''
      }
    }
  },
  watch: {
    // 把监听的变量当作属性名, 属性值是个方法, 当这个变量发生变化的时候，就会执行后面的方法
    num: function() {
      console.log('num 发生变化了')
    },
    'loginForm.username': function(newVal, oldVal) {
        console.log(newVal, oldVal)
        console.log(`手机号由${oldVal}变成了${newVal}`)
        // newVal === this.loginForm.username
    },
    // loginForm() {
    //   console.log('loginForm 变了')
    // },
    // 深度检测， 对象/数组，对象中任意属性发生变化，就会执行 handler 方法
    // 只是能监测到，但是不知道具体是谁变化了
    loginForm: {
      deep: true,
      handler() {
        console.log('loginForm某个属性发生变化了')
      }
    },

    keyword(newVal) {
        const script = document.createElement('script');
        script.src = 'https://www.baidu.com/sugrec?json=1&prod=wise&callback=fn&wd=' + newVal;
        document.body.appendChild(script);
        window.fn = data => {
          console.log(data);
          this.result = (data.g || []).map(item => item.q)
        }
    }
  }
}
</script>

<style lang="sass">

</style>
